<script setup lang="ts">
import { reactive, nextTick } from 'vue';
import { showToast } from '@tarojs/taro';
import { Uploader as NutIconUploader, MaskClose as NutIconMaskClose } from '@nutui/icons-vue-taro';
import APPROVE_PERSON_HEAD from '/@/assets/image/icon/approve-person-head.png';
interface Props {
  /**
   * 1:审批 2: 抄送
   */
  flowType?: number;
  /**
   * 在审批节
   * 1:依次审批
   * 2:会签
   * 3:或签
   */
  type?: number;
  /**
   * 添加人员的集合
   */
  persons: FlowPathTemplateApi.ApproverPerson[];
  /**
   * id 标识
   */
  id: number;
  /**
   * 是否支持更改人员（包含：添加/删除操作）
   */
  isModify: boolean;
}
const props = defineProps<Props>();

const emits = defineEmits<{
  (e: 'onChange'): void;
}>();
const state = reactive<{
  /**
   * 参会用户选择弹窗是否显示
   */
  appUserListPopupIsShow: boolean;
  list: FlowPathTemplateApi.ApproverPerson[];
}>({
  appUserListPopupIsShow: false,
  list: [],
});

function deletePerson(index: number) {
  if (!props.isModify) {
    return;
  }
  props.persons.splice(index, 1);
}

/**
 * 返回user在list中的index，如果没有找到返回：-1
 * @param user 需要查询的user
 */
function findUserIndex(user: AppSysUser.Dto) {
  const index = props.persons.findIndex((item) => {
    return item.valueId === user.uaaUserId;
  });
  return index;
}

/**
 * 选择用户
 */
function addUser(user: AppSysUser.Dto) {
  //选择相同的人员跳过
  const index = findUserIndex(user);
  if (index >= 0) {
    showToast({ title: '不能重复添加人员', icon: 'error' });
    return;
  }
  props.persons.push({
    valueId: user.uaaUserId,
    valueName: user.name,
    valueSort: props.persons.length,
  });

  emits('onChange');
  scrollViewToRight();
}
/**
 * scrollView滚动到最右边
 */
function scrollViewToRight() {
  //子view渲染后才能滚动
  nextTick(() => {
    const dom = document.getElementById('approve-person-list-scroll-view-' + props.id);
    console.log('dom', dom);
    const scrollWidth = dom?.scrollWidth;
    if (dom && scrollWidth) {
      dom.scrollLeft += scrollWidth;
    }
  });
}

/**
 * 判断是不是专有钉钉PC端和PC
 */
function isPC() {
  if (navigator.userAgent.search(/(iphone|ipad|ipod)/i) >= 0) {
    return false;
  } else if (navigator.userAgent.search(/android/i) >= 0) {
    return false;
  } else if (process.env.TARO_ENV === 'h5') {
    return true;
  }
  return false;
}
</script>
<template>
  <view
    class="approve-person-list"
    :class="{ 'approve-person-list-scroll': !isPC() }"
    :id="'approve-person-list-scroll-view-' + id"
  >
    <view class="approve-person-item" v-for="(item, index) in props.persons" :key="index">
      <view>
        <view class="approve-person-item__header">
          <image class="approve-person-item__header__image" :src="APPROVE_PERSON_HEAD" />
          <nut-icon-mask-close
            class="approve-person-item__header__close"
            v-if="props.isModify"
            @click="deletePerson(index)"
          />
        </view>
        <view class="approve-person-item__footer">
          {{ item.valueName }}
        </view>
      </view>
      <!-- 1.可以修改 显示所有 2.不可以修改 不显示最后一个  -->
      <view
        class="approve-person-item__type"
        v-if="props.isModify || (!props.isModify && index != props.persons.length - 1)"
      >
        <!-- + / > -->
        <text v-if="props.type === 1">></text>
        <text v-else-if="props.type === 2">+</text>
        <text v-else-if="props.type === 3">/</text>
      </view>
    </view>
  </view>
  <view
    class="approve-person-item-add"
    @click="state.appUserListPopupIsShow = !state.appUserListPopupIsShow"
    v-if="props.isModify"
  >
    <view class="approve-person-item-add__header">
      <view class="approve-person-item-add__header-wrapper">
        <nut-icon-uploader />
      </view>
      <view class="approve-person-item-add__require" v-if="props.flowType === 1">*</view>
    </view>
  </view>
  <app-user-list-popup
    v-model="state.appUserListPopupIsShow"
    title="审批/抄送人"
    @on-selected="addUser"
  />
</template>
<style lang="scss">
.approve-person-list-scroll {
  &::-webkit-scrollbar {
    width: 0;
  }
}
.approve-person-list {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
  width: 360px;
  text-align: right;
  // &::-webkit-scrollbar {
  //   width: 0;
  // }
  .approve-person-item {
    text-align: center;
    display: inline-flex;
    &__header {
      width: 70px;
      height: 70px;
      border: 1px solid #dddddd;
      border-radius: 10px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px 5px 5px 10px;
      &__image {
        width: 36px;
        height: 36px;
      }
      &__close {
        position: absolute;
        top: -10px;
        right: -10px;
      }
    }
    &__footer {
      color: #999;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 110px;
    }
    &__type {
      font-size: 30px;
      color: #999;
      margin: 20px 5px;
    }

    &:last-child {
      margin-right: 0px;
    }
  }
}

.approve-person-item-add {
  text-align: center;
  display: inline-flex;
  &__header {
    width: 70px;
    height: 70px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 38px 10px;
  }
  &__header-wrapper {
    margin-top: 10px;
  }

  &__require {
    position: absolute;
    top: -8px;
    right: -2px;
    color: red;
    font-size: 30px;
  }
}
</style>
